<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% include "component/static_resource_css.html" %}
    <title>帖子详情</title>
    <style>
        .active1 {
            display: none;
        }

        .comment-popup {
            width: 920px;
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 9999;
        }

        .comment-remove {
            cursor: pointer;
        }

        .custom-sm-btn {
            padding: 0.15rem 0.3rem;
            font-size: 0.7rem;
            line-height: 1.5;
            border-radius: .2rem;
        }


    </style>
</head>
<body>
<div class="nk-container">

    {% include 'component/header.html' %}
    <!-- 内容 -->
    <div class="main">
        <!-- 帖子详情 -->
        <div class="container">
            <div class="media" style="justify-content: space-between">
                <!-- 标题 -->
                <h5 class="mb-4">
                    <i class="bi bi-award" style="color: rgb(119, 84, 223)"></i>
                    <span> {{ post.title }} </span>
                    {% if post.type == 1 %}
                        <span class="badge badge-secondary bg-danger"
                              style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
                    {% endif %}
                    {% if post.status == 1 %}
                        <span class="badge badge-secondary bg-primary"
                              style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
                    {% endif %}
                </h5>
                <div class="float-right" style="white-space: nowrap">
                    {% if current_user.type >1 %}
                        <button type="button"
                                class="btn {{ 'btn-danger' if post.type == 0 else 'btn-info' }} btn-sm"
                                id="topBtn">
                            {{ '置顶' if post.type == 0 else '取消置顶' }}
                        </button>
                        <button type="button" class="btn btn-danger btn-sm" id="wonderfulBtn">
                            {{ '加精' if post.status == 0 else '取精' }}
                        </button>
                    {% endif %}
                    {% if current_user.type >1 or current_user.id==post.user_id %}
                        <button type="button" class="btn btn-danger btn-sm" id="deleteBtn">
                            删除
                        </button>
                        <button type="button" class="btn btn-danger btn-sm" id="alterBtn">
                            修改
                        </button>
                    {% endif %}
                </div>
            </div>
            <!-- 作者 -->
            <div class="media pb-3 border-bottom">
                <a href="/user/profile/{{ post.user_id }}">
                    <img src="{{ post.header_url }}" class="align-self-start mr-4 rounded-circle user-header"
                         alt="用户头像">
                </a>
                <div class="media-body">
                    <div class="mt-0 text-warning">
                        <a href="/user/profile/{{ post.user_id }}">
                            {{ post.username }}
                        </a>
                    </div>
                    <div class="text-muted mt-3">
                        发布于 <b>{{ post.create_time }}</b>
                        <ul class="d-inline float-right">
                            <li class="d-inline ml-2">
                                <img class="user_like"
                                     src="{{ "/static/img/like02.svg" if post.like== 1 else "/static/img/like01.svg" }}"
                                     style=" width:20px;height:20px;cursor: pointer;">
                                <span>{{ post.like_count }}</span>
                            </li>
                            <li class="d-inline ml-2">|</li>
                            <li class="d-inline ml-2">
                                <img src="/static/img/comment.svg" style="width:20px;height:20px;">
                                <span>{{ post.comment_count }}</span>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- 正文 -->
            <div class="mt-4 mb-3 content" id="md-content">
                <textarea style="display:none;">{{ post.content }}</textarea>
            </div>
        </div>
        <!-- 回帖 -->
        <div class="container mt-3">
            <!-- 回帖数量 -->
            <div class="row">
                <div class="col-8">
                    <h6><b class="square"></b> <i>{{ post.comment_count }}</i>条回帖</h6>
                </div>
                <div class="col-4 text-right">
                    <span class="btn btn-primary btn-sm btn-comment" style="cursor: pointer;">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</span>
                </div>
            </div>
            <!-- 回帖列表 -->
            {% for comment in comment_all %}
                <ul class="list-unstyled mt-4">
                    <li class="media pb-3 pt-3 mb-3 border-bottom">
                        <a href="@{|/user/profile/${cvo.user.id}|}">
                            <img src="{{ comment.header_url }}" class="align-self-start mr-4 rounded-circle user-header"
                                 alt="用户头像">
                        </a>
                        <div class="media-body">
                            <div class="mt-0">
                                <span class="font-size-12 text-success"> {{ comment.username }}</span>
                                <span class="badge badge-secondary float-right floor">
        									<!-- 楼数 -->
       									第<i>{{ loop.index }}</i> 楼
        								</span>
                            </div>
                            <div class="mt-2">{{ comment.content }}</div>
                            <div class="mt-4 text-muted font-size-12">
                                <span>发布于 <b>{{ comment.create_time }}</b></span>
                                <div style="float: right">
                                    <img class="like"
                                         src="{{ '/static/img/like02.svg' if comment.like== 1 else '/static/img/like01.svg' }}"
                                         style="width:20px;height:20px;cursor: pointer"
                                         id="like_{{ comment.id }}">

                                    <span>{{ comment.like_count }}</span>
                                    <button class="reply-button" type="button"
                                            style="border: none;background-color: transparent">
                                        <img style="width: 20px;height: 20px" src="/static/img/comment.svg">
                                        <span>{{ comment.reply_count }}</span>
                                    </button>

                                    <button type="button" style="border: none;background-color: transparent"
                                            class="Button Button--plain Button--withIcon Button--withLabel css-1ij6qqc">
                                        回复
                                    </button>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="hidden" class="hidden-input" value="{{ comment.id }}">
                                    <input type="hidden" class="hidden-input1" value="{{ comment.user_id }}">
                                    {% if  current_user.type == 99 or current_user.id == post.user_id or current_user.id == comment.user_id %}
                                        <button class="btn btn-primary custom-sm-btn comment-remove">删除</button>
                                    {% endif %}
                                </div>
                                {#评论回复#}
                                <div class="reply  active1">
                                    <form action="/comment/reply/{{ post.id }}" method="post">
                                        <table>
                                            <tr>
                                                <td>
                                                    <span>发表回复</span>
                                                </td>
                                                <td style="text-align: center">
                                                    <button type="button"
                                                            style="border: none;background-color: transparent"
                                                            class="Button remove-button Button--withIcon Button--withLabel css-1ij6qqc">
                                                        取消回复
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2"><textarea class="reply-text" rows="6" cols="120"
                                                                          name="textarea"></textarea>
                                                </td>
                                            </tr>
                                            <tr>

                                                <td colspan="2" style="text-align: center">
                                                    <div style="margin-top: 5px">
                                                        <input type="hidden" class="user_id_now"
                                                               value="{{ current_user.id }}">
                                                        <input type="hidden" class="post_id"
                                                               value="{{ comment.id }}">
                                                        <input type="submit"
                                                               class="btn btn-primary btn-sm reply-submit"/>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </form>
                                </div>
                                {#回复详情#}
                                <div class="detail active1">
                                    {% for reply in replys %}
                                        {% if reply.comment_post_id == comment.id %}
                                            <ul class="list-unstyled mt-4">
                                                <li class="media pb-3 pt-3 mb-3 border-bottom">
                                                    <a href="@{|/user/profile/${cvo.user.id}|}">
                                                        <img src="{{ reply.header_url }}"
                                                             class="align-self-start mr-4 rounded-circle user-header"
                                                             alt="用户头像">
                                                    </a>
                                                    <div class="media-body">
                                                        <div class="mt-0">
                                                            <span class="font-size-12 text-success"> {{ reply.username }}</span>
                                                        </div>
                                                        <div class="mt-2">{{ reply.content }}</div>
                                                        <div class="mt-4 text-muted font-size-12">
                                                            <span>发布于 <b>{{ reply.create_time }}</b></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        {% endif %}
                                    {% endfor %}
                                </div>

                            </div>


                        </div>
                    </li>
                </ul>
            {% endfor %}
            <div class="comment-popup active1  ">
                <form action="/comment/{{ post.id }}" method="post">
                    <table>
                        <tr>
                            <td>
                                <span>发表回帖</span>
                            </td>
                            <td style="text-align: right">
                                <span>  <img class="comment-side-tit-close" src="/static/img/x.png"></span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><textarea id="comment-text" rows="6" cols="120" name="textarea"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: center">
                                <div style="margin-top: 5px">
                                    <input type="submit" class="btn btn-primary btn-sm" id="comment"/>
                                </div>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>


        </div>
        {#    分页    #}
        {% include "component/pagination.html" %}
        <!-- 提示框 -->
        <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="hintModalLabel">提示</h5>
                    </div>
                    <div class="modal-body" id="hintBody"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    {% include "component/footer.html" %}
</div>

{% include "component/static_resource_js.html" %}
<script src="/static/editor-md/lib/marked.min.js"></script>
<script src="/static/editor-md/lib/prettify.min.js"></script>
<script src="/static/editor-md/lib/raphael.min.js"></script>
<script src="/static/editor-md/lib/underscore.min.js"></script>
<script src="/static/editor-md/lib/sequence-diagram.min.js"></script>
<script src="/static/editor-md/lib/flowchart.min.js"></script>
<script src="/static/editor-md/lib/jquery.flowchart.min.js"></script>
<script src="/static/editor-md/editormd.min.js"></script>

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("md-content", {
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        })
    })
    $(document).ready(function () {
        $("#deleteBtn").click(function () {
            $.ajax({
                type: 'POST',
                url: "http://127.0.0.1:5000/post/delete/" + {{ post.id }},
                dataType: 'json',
                contentType: "application/json",
                isCorrect: function () {
                    alert("ok")
                },
                success: function (data) {
                    if ((data.code + '')[0] != '2') {
                        alert("失败")
                        console.error(data.msg)
                        return
                    }
                    alert("成功");
                    setTimeout(function () {
                        window.location.href = "http://127.0.0.1:5000"; // 跳转到首页
                    }, 1500); // 延时1秒后跳转
                },
                error: function () {
                    alert("失败")
                },
            })
        });

        $("#alterBtn").click(function () {
            window.location.href = "http://127.0.0.1:5000/post/alter/" + {{ post.id }}
        });
    });
    {#弹出评论框#}
    $(document).ready(function () {
        $(".btn-comment").click(function () {
            {#判断是否登录#}
            if ("{{ current_user.id }}" == "0") {
                $("#hintBody").text("未登录,请前往登录");
                // 显示提示框
                $("#hintModal").modal("show");
                // 2s 后自动隐藏提示框
                setTimeout(function () {
                    $("#hintModal").modal("hide");
                }, 2000);
            } else {
                $(".comment-popup").removeClass("active1");
            }

        });
        {#关闭评论框#}
        $(".comment-side-tit-close").click(function () {
            $(".comment-popup").addClass("active1")
        })

        $("#comment").click(function (e) {
            var comment = $("#comment-text").val();
            if (comment.length == 0) {
                e.preventDefault()
            }
            $(".comment-popup").addClass("active1")
        });
    });
    {#删除评论#}
    $(".comment-remove").click(function () {
        var commentId = $(this).prevAll(".hidden-input")
        var data = {comment_id: commentId.val(), target_user_id: {{post.id}}};
        console.log(data)
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:5000/comment/delete",
            data: JSON.stringify(data),
            contentType: 'application/json',
            isCorrect: function () {
                alert("ok")
            },
            success: function (data) {
                if (data['data'] == 1) {
                    setTimeout(function () {
                        window.location.replace("http://127.0.0.1:5000/post/{{ post.id }}");
                    }, 10); // 延时1秒后跳转
                }
            }
        })
    });
    {#回复评论#}
    $(document).ready(function () {
        $(".Button--plain").click(function () {
            {#判断是否登录#}
            if ({{ current_user.id }} == 0
            ) {
                $("#hintBody").text(data.msg);
                // 显示提示框
                $("#hintModal").modal("show");
                // 2s 后自动隐藏提示框
                setTimeout(function () {
                    $("#hintModal").modal("hide");
                    // 操作完成后，跳转到首页
                    location.href = CONTEXT_PATH + "/index";
                }, 2000);
            } else {
                $(".reply").addClass("active1")
                $(this).parent().next(".reply").removeClass("active1");
            }
        });
        $(".remove-button").click(function () {
            $(".reply").addClass("active1")
        });
        $(".reply-submit").click(function (e) {
            e.preventDefault()
            var reply_text = $(this).closest('tr').prev().find('.reply-text').val()
            if (reply_text.length == 0) {
                e.preventDefault()
            } else {

            console.log(reply_text)
            var user_id = $(this).prevAll(".user_id_now").val()
            var comment_post_id = $(this).prevAll(".post_id").val()
            var data = {
                user_id: user_id,
                comment_post_id: comment_post_id,
                target_post_id: {{ post.id }},
                reply_text: reply_text,
            };
            $.ajax({
                type: 'POST',
                url: "http://127.0.0.1:5000//comment/reply",
                data: JSON.stringify(data),
                contentType: 'application/json',
                isCorrect: function () {
                    alert("ok")
                },
                success: function (data) {
                    if (data['data'] == 1) {
                        setTimeout(function () {
                            window.location.replace("http://127.0.0.1:5000/post/{{ post.id }}");
                        }, 10); // 延时1秒后跳转
                    }
                }
            });
        }
        });
    });
    {#显示评论#}
    $(document).ready(function () {
        $(".reply-button").click(function () {
            {#hasClass 方法来判断一个 div 是否包含某个特定的 class#}
            if ($(this).parent().next(".reply").next(".detail").hasClass("active1")) {
                $(this).parent().next(".reply").next(".detail").removeClass("active1")
            } else {
                $(this).parent().next(".reply").next(".detail").addClass("active1")
            }
        })
    })

    {#加精&置顶#}
    $(document).ready(function () {
        $('#topBtn').on('click', function () {
            var data = {
                postId: '{{ post.id }}',
                postType: '{{ post.type }}'
            };
            $.ajax({
                type: 'POST',
                url: "http://127.0.0.1:5000/post/add",
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function (data) {
                    if (data['data'] == 1) {
                        setTimeout(function () {
                            window.location.replace("http://127.0.0.1:5000/post/{{ post.id }}");
                        }, 1000); // 延时1秒后跳转
                    }
                },
                error: function () {
                    alert("失败")
                },
            });
        });
    });
    $(document).ready(function () {
        $('#wonderfulBtn').on('click', function () {
            var data = {
                postId: '{{ post.id }}',
                postStatus: '{{ post.status }}'
            };
            $.ajax({
                type: 'POST',
                url: "http://127.0.0.1:5000/post/add",
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function (data) {
                    if (data['data'] == 1) {
                        setTimeout(function () {
                            window.location.replace("http://127.0.0.1:5000/post/{{ post.id }}");
                        }, 1000); // 延时1秒后跳转
                    }
                },
                error: function () {
                    alert("失败")
                },
            });
        });
    });
    {#评论点赞#}
    $('.like').click(function () {
        var id = $(this).attr('id').split("_")[1];
        var abc = $(this)
        var data = {likeType: 1, commentId: id};
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:5000/comment/like",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            isCorrect: function () {
                alert("ok")
            },
            success: function (data) {
                if (data.data == 0) {
                    abc.attr('src', '/static/img/like01.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount - 1);
                    alert("取消点赞");
                } else {
                    abc.attr('src', '/static/img/like02.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount + 1);
                    alert("点赞成功");
                }
                if ((data.code + '')[0] != '2') {
                    alert("失败")
                    console.error(data.msg)
                    return
                }
            },
            error: function () {
                alert("未登录")
            },
        })
        console.log(id);
    })
    {#文章点赞#}
    $('.user_like').click(function () {
        var id = $(this).attr('id').split("_")[1];
        var abc = $(this)
        var data = {likeType: 1, postId: id};
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:5000/post/like",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            isCorrect: function () {
                alert("ok")
            },
            success: function (data) {
                if (data.data == 0) {
                    abc.attr('src', '/static/img/like01.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount - 1);
                    alert("取消点赞");
                } else {
                    abc.attr('src', '/static/img/like02.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount + 1);
                    alert("点赞成功");
                }
                if ((data.code + '')[0] != '2') {
                    alert("失败")
                    console.error(data.msg)
                    return
                }
            },
            error: function () {
                alert("未登录")
            },
        })
        console.log(id);
    })
</script>
</body>
</html>
